<template>
  <el-row class="loginBox" type="flex" justify="center" align="middle">
    <el-col class="loginForm" :span="6">
      <h2>优点达资讯系</h2>

      <!--
        form 表单组件
        form-item 表单每一项

        想要表单校验，需要达到的条件
          1. form 需要有
            1.1 rules 属性 配置校验规则
            1.2 model 属性 关联表单数据（就是需要校验的数据）
          2. form-item 需要有
              prop属性 需要设置为校验的字段名
          3. input 要有 v-model
        -->
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="login_name">
          <!--  prefix-icon 这是以属性的方式来添加图标（前面） -->
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
            v-model="form.login_name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请填写密码"
            show-password
            v-model="form.password"
          >
            <!-- 以插槽技术来实现图表效果 -->
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="loginBtn" type="primary" @click="onSubmit">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import { mapActions } from 'vuex'
// 将来发送请求  axios('xxx', this.form)

export default {
  data() {
    return {
      form: {
        // 名字 参考接口文档的参数名
        login_name: 'admin',
        password: '111111'
      },
      rules: {
        // 表单的校验规则
        // 对 login_name 数据进行校验
        login_name: [
          // required: true, 必填项   message 提示消息  trigger 触发方式  blur 失去焦点触发来校验
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 用户名长度限制
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '密码长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions('user', ['ActionsSetToken']),
    async onSubmit() {
      // console.log('submit!')

      // 要想发送ajax请求，实现登录功能，前提是表单通过了校验

      // 需要做件事：点击按钮，做表单整体做个校验，得到校验的结果 ==> 需要去借助表单组件 validate 方法
      //  1. 如果校验通过了，才能发请求
      //  2. 如果校验不通过，不发

      // console.log(this.$refs.form.validate()) // 方法调用的结果是个promise对象（async、await  + try-catch）

      try {
        await this.$refs.form.validate()

        // 校验通过了 ==> 发送ajax请求
        // console.log('在这写ajax代码')
      } catch (e) {
        // 如果代码走到这，说明校验不通过, return 不能省（阻止后续代码的执行）
        return console.log('校验不通过', e)
      }

      //  发送ajax请求
      // console.log('在这写ajax代码')

      try {
        // 组件中不要调用接口，调actions方法（异步的ajax请求）
        // const res = await userLogin(this.form)
        // console.log('🚀 ~ file: ', res)

        // async 修饰的函数是异步的
        // 记得前面await 不能少
        await this.ActionsSetToken(this.form)

        // 登录成功了
        //  提示登录成功
        this.$message.success('登录成功')
        //  跳转页面 /
        this.$router.push('/')
      } catch (e) {
        console.log('登录失败', e)
      }
    }
  }
}
</script>

<style scoped lang="less">
.loginBox {
  height: 100vh;
  background-color: #304156;

  .loginForm {
    background-color: #fff;
    height: 300px;
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.3);
    padding: 30px;
    border-radius: 10px;
    min-width: 400px;

    h2 {
      font-size: 26px;
      color: coral;
      margin: 0 auto 30px auto;
      padding-bottom: 10px;
      text-align: center;
      font-weight: 400;
      border-bottom: 1px solid #ddd;
    }

    .loginBtn {
      width: 100%;
      color: #fff;
      background-color: coral;
      border-color: coral;
    }
  }
}
</style>
